#include("LayuiHead.html")
<div class="layui-fluid layui-card">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">输入示例</li>
            <li>查看原码</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form action="" class="layui-form  margin-10" lay-filter="form">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">选择树</label>


                                <div class="layui-input-inline" style="width:250px">
                                    <input name="tree1" type="text" url="../testtable/getTestTreeApi" class="layui-input layui-hide" lay-skin="mytreeselect" value="grade12" placeholder="请选择节点">
                                </div>
                                <div class="layui-input-inline" style="width:150px">
                                    <input name="tree2" type="text" url="../testtable/getTestTreeApi" class="layui-input layui-hide" id="treeselect1" value="5" placeholder="请选择节点">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">备注</label>

                                <div class="layui-input-block">
                                    <textarea name="test_desc" placeholder="请输入备注" class="layui-textarea" style="height:60px"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="Submit1">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                 <pre class="layui-code" lay-lang="HTML" lay-title="对应的HTML结构" encode="true">
                 &lt;input type="text" name="tree1" url="../testtable/getTestTreeApi" class="layui-input layui-hide" lay-skin="mytreeselect" value="grade12" placeholder="请选择节点"&gt;
                </pre>
                <pre class="layui-code" lay-lang="JS" lay-title="对应的JS代码">
   layui.use(['myTreeSelect'], function () {
        var treeSelect = layui.myTreeSelect;

        var datas =
                [{
                    "children": [
                        {"title": "留言列表", "text": "留言列表", "id": 5, "turn": true},
                        {"title": "发表留言", "text": "发表留言", "id": 6, "turn": true}
                    ],
                    "title": "评论(无法选择)", "text": "评论", "id": 4, "turn": false
                }];
        //从接口中读取数据
        treeSelect.render({});
        // 初始化下拉选择器
        treeSelect.render({
            elem: '#treeselect1',
            data: datas,//页面定义data
            height: 200,
            init: '5',
            click: function (d) {
                console.log(d);
            }
        });
    });


                </pre>
            </div>
        </div>
    </div>
</div>
<script>
    var TreeInit = 'TreeSelect';
    layui.use(['myTreeSelect'], function () {
        var treeSelect = layui.myTreeSelect;

        var datas =
                [{
                    "children": [
                        {"title": "留言列表", "text": "留言列表", "id": 5, "turn": true},
                        {"title": "发表留言", "text": "发表留言", "id": 6, "turn": true}
                    ],
                    "title": "评论(无法选择)", "text": "评论", "id": 4, "turn": false
                }];
        //从接口中读取数据
        treeSelect.render({});
        // 初始化下拉选择器
        treeSelect.render({
            elem: '#treeselect1',
            data: datas,//页面定义data
            height: 200,
            init: '5',
            click: function (d) {
                console.log(d);
            }
        });
    });

    layui.use(['form', 'myTool'], function () {
        layui.form.on('submit(Submit1)', function (data) {
            top.layer.alert('1:' + data.field.tree1 + '<br/>2:' + data.field.tree2, {offset: "100px"});
            return false;
        });
    });

</script>
#include("LayuiBottom.html")